<template>
  <div>
    <el-header style="height: 50px; margin: auto">
      <span style="color: white; font-size: 30px; float:left; ">湖北物业管理系统</span>
      <span style="color: white; font-size: 20px;">欢迎：{{ ruleForm.username }}</span>
      <router-link to="/Xiugai" style="margin-left: 30px;color: white">修改密码</router-link>
      <router-link to="/" style="margin-left: 10px;color: white;">安全退出</router-link>
      <span style="color: #cccccc; font-size: 20px; float: right">今天是：{{ nowDate }}</span>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-row class="tac">
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-menu"></i>导航菜单</template>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>系统管理</template>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-menu"></i>基础资料</template>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"><i class="el-icon-menu"></i>日常管理</template>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"><i class="el-icon-menu"></i>行政管理</template>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title"><i class="el-icon-menu"></i>客服管理</template>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title"><i class="el-icon-menu"></i>工程管理</template>
              <el-menu-item-group>
                <el-menu-item index="7-1">
                  <i class="el-icon-office-building"></i>
                  <router-link to="/xiezilou" style="text-decoration:none; color: cornflowerblue">写字楼电费管理</router-link>
                </el-menu-item>
                <el-menu-item index="7-2">
                  <i class="el-icon-money"></i>
                  <router-link to="/yinhang" style="text-decoration:none; color: cornflowerblue">银行影院水费管理</router-link>
                </el-menu-item>
                <el-menu-item index="7-3">
                  <i class="el-icon-s-home"></i>
                  <router-link to="/zhuzhai" style="text-decoration:none; color: cornflowerblue">住宅水费管理</router-link>
                </el-menu-item>
                <el-menu-item index="7-4">
                  <i class="el-icon-wallet"></i>
                  <router-link to="/dianfei" style="text-decoration:none; color: cornflowerblue">电费分摊</router-link>
                </el-menu-item>
                <el-menu-item index="7-5">
                  <i class="el-icon-goods"></i>
                  <router-link to="/shangchang" style="text-decoration:none; color: cornflowerblue">商场水费分摊</router-link>
                </el-menu-item>
                <el-menu-item index="7-6">
                  <i class="el-icon-s-data"></i>
                  <router-link to="/diantu" style="text-decoration:none; color: cornflowerblue">电费走势图</router-link>
                </el-menu-item>
                <el-menu-item index="7-7">
                  <i class="el-icon-s-data"></i>
                  <router-link to="/shuitu" style="text-decoration:none; color: cornflowerblue">水费走势图</router-link>
                </el-menu-item>
                <el-menu-item index="7-8">
                  <i class="el-icon-edit-outline"></i>
                  <router-link to="/shebei" style="text-decoration:none; color: cornflowerblue">设备巡查运行记录管理</router-link>
                </el-menu-item>
                <el-menu-item index="7-9">
                  <i class="el-icon-date"></i>
                  <router-link to="/jiaban" style="text-decoration:none; color: cornflowerblue">加班统计表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="8">
              <template slot="title"><i class="el-icon-menu"></i>安防管理</template>
            </el-submenu>
            <el-submenu index="9">
              <template slot="title"><i class="el-icon-menu"></i>物品申购</template>
            </el-submenu>
            <el-submenu index="10">
              <template slot="title"><i class="el-icon-menu"></i>物资管理</template>
            </el-submenu>
            <el-submenu index="11">
              <template slot="title"><i class="el-icon-menu"></i>停车场报表查询</template>
            </el-submenu>

          </el-menu>
        </el-row>

      </el-aside>
      <!--选项卡打开显示-->
      <div id="account" style="float: left;  margin-top: 1%; margin-left: 2%;  ">
        <page-tabs :keep-alive-component-instance="keepAliveComponentInstance"/>
        <div ref="keepAliveContainer">
          <!-- <keep-alive>
             <router-view :key="$route.fullPath" />
           </keep-alive>-->
        </div>
        <router-view></router-view>

      </div>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>

export default {
  props: ['name'],
  name: 'Main',
  data () {
    return {
      ruleForm: {
        username: sessionStorage.getItem('username')
      },
      username: '',
      nowDate: '' // 当前日期
    }
  },
  methods: {
    currentTime () {
      setInterval(this.formatDate, 500)
    },
    formatDate () {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      let week = date.getDay() // 星期
      let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}年/${month}月/${day}日 ${hour}:${minute}:${second} ${weekArr[week]}`
    }
  },
  gotoRegister () {
    this.$router.push('/')
  },
  mounted () {
    this.currentTime()
  },
  // 销毁定时器
  beforeDestroy () {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: cornflowerblue;
  color: #333;
  line-height: 35px;
}

.el-aside {
  color: #333;
}
</style>
